<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket在线测试工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <style>
        .site-doc-icon li .layui-anim {
            width: 100px;
            height: 100px;
            line-height: 150px;
            margin: 0 auto 10px;
            text-align: center;
            background-color: #009688;
            cursor: pointer;
            color: #fff;
            border-radius: 50%;
        }

        .textarea {
            margin-top: 20px;
            margin-left: 0px;
            height: 150px;
            width: 100%;
        }

        body {
            margin-top: 20px;
        }

        .layui-form-item .layui-input-inline {
            width: 250px;
        }
    </style>
</head>

<body>


<div class="layui-form">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>websocket服务器信息</legend>
    </fieldset>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-md7">
                        <input type="text" class="layui-input layui-col-md7" name="server" id="wsServer"
                               lay-verify="title" autocomplete="off" value="ws://localhost:8888/upper"
                               placeholder="请输入websocket连接地址">
                    </div>
                    <div class="layui-col-md1" style="margin-left: 1%;">
                        <button type="button" class="layui-btn" lay-submit="" func="connect">连接</button>
                    </div>
                    <div class="layui-col-md1" style="margin-left: 5%;">
                        <button type="button" class="layui-btn " func="disconnect">断开</button>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md10">
                        <textarea placeholder="发送的内容" name="input" id="sendContent"
                                  class="layui-textarea textarea" style="width:100%;"></textarea>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md10">
                        <button type="button" class="layui-btn" lay-submit="" func="sendMsg"
                                style="margin-top: 10px;width: 100%;">发送
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header" style="background-color: #9d9d9d;">服务器输出</div>
                    <div class="layui-card-body" id="receiveContent" style="border: #3c3c3c;">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<script src="static/jquery/jquery.min.js"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script>

    var sock = null;

    $(".layui-btn").on('click', function () {
        var othis = $(this);
        var func = othis.attr('func');
        var server = $("#wsServer").val();
        if (func == 'connect') {
            connectToServer(server);
        } else if (func == 'disconnect') {
            sock.close();
        } else if (func == 'sendMsg') {
            var msg = $('#sendContent').val();
            sendData(msg);
        }
    })

    function connectToServer(server) {
        $('#receiveContent').val("");
        sock = new WebSocket(server);
        sock.onopen = function () {
            alert('成功连接到ws服务器');
        }
        sock.onclose = function (e) {
            alert('从服务器断开连接');
            sock = null;
        }
        sock.onmessage = function (e) {
            var content = '<font color="green">[' + dateToString(new Date()) + ']接收到服务器消息：</font><br/>' + e.data;
            appendOutput(content);
        }
    }

    function appendOutput(msg) {
        var content = $('#receiveContent').html();
        content += "<br/>" + msg;
        $('#receiveContent').html(content);
    }

    function sendData(msg) {
        if (sock == null) {
            alert('与服务器的连接已断开');
        }
        var content = '<font color="red">[' + dateToString(new Date()) + ']您向服务器发送</font><br/>' + msg;
        appendOutput(content);
        sock.send(msg);
    }

    function dateToString(date) {
        var year = date.getFullYear();
        var month = (date.getMonth() + 1).toString();
        var day = (date.getDate()).toString();
        var hour = (date.getHours()).toString();
        var minute = (date.getMinutes()).toString();
        var second = (date.getSeconds()).toString();
        if (month.length == 1) {
            month = "0" + month;
        }
        if (day.length == 1) {
            day = "0" + day;
        }
        var dateTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
        return dateTime;
    }

</script>
</body>
</html>